<script setup>
import { h, onMounted, ref, resolveDirective, withDirectives } from 'vue'
import {
  NAvatar,
  NButton,
  NEllipsis,
  NFlex,
  NForm,
  NFormItem,
  NImage,
  NInput,
  NPopconfirm, NSelect,
  NSwitch,
  NTag,
  useMessage
} from 'naive-ui'

import CommonPage from '@/components/page/CommonPage.vue'
import QueryBarItem from '@/components/query-bar/QueryBarItem.vue'
import CrudModal from '@/components/table/CrudModal.vue'
import CrudTable from '@/components/table/CrudTable.vue'
import TheIcon from '@/components/icon/TheIcon.vue'
import { getToken } from '@/utils'
import { renderIcon } from '@/utils'
import { useCRUD } from '@/composables'
import api from '@/api'
import {router} from "@/router";
const base_path = import.meta.env.VITE_BASE
import default_image from "@/assets/images/mz.jpg"

defineOptions({ name: '企业管理' })
const $table = ref(null)
const queryItems = ref({})
import { useRoute } from 'vue-router';
const route = useRoute();

const {
  modalVisible,
  modalTitle,
  modalLoading,
  handleSave,
  modalForm,
  modalFormRef,
  handleEdit,
  handleDelete,
  handleAdd,
} = useCRUD({
  name: '企业',
  initForm: {},
  doCreate: api.createCustomersByUser,//接口地址修改
  doUpdate: api.updateCustomers,//接口地址修改
  doDelete: api.deleteCustomers,//接口地址修改
  refresh: () => $table.value?.handlerefresh(),
})

const data = reactive({
  customer_level: [],
  token: "dev",
  uploadAction: base_path+'api/customers/customers_post/file_user',
  onLevelData: [],
  selectValue:'',
  show_excel:false,
  show_info:false,
  c_type:[],
  c_status:[],
  fileList1: [],
  fileList2: [],
  fileList3: [],
  add_uid:1,
});


const customRequestMethod1 = ({ file, event }) => {
  let data = (event?.target).response
  data = JSON.parse(data)
  console.log(data)
  if (data.code === 200) {
    modalForm.value.sfz_z = data.data.url

    message.success('上传成功')
  } else {
    message.error(data.data)
  }
  return file
}
const customRequestMethod2 = ({ file, event }) => {
  let data = (event?.target).response
  data = JSON.parse(data)
  console.log(data)
  if (data.code === 200) {
    modalForm.value.sfz_f = data.data.url

    message.success('上传成功')
  } else {
    message.error(data.data)
  }
  return file
}
const customRequestMethod3 = ({ file, event }) => {
  let data = (event?.target).response
  data = JSON.parse(data)
  console.log(data)
  if (data.code === 200) {
    modalForm.value.yyzz = data.data.url

    message.success('上传成功')
  } else {
    message.error(data.data)
  }
  return file
}

onMounted(() => {
  data.add_uid = route.query.add_uid;
  handleAdd()
})

//表单规则部分
const addAPIRules = {
  qymc: [
    {
      required: true,
      message: '请输入企业名称',
      trigger: ['input', 'blur'],
    },
  ],
  qysh: [
    {
      required: true,
      message: '请输入企业税号',
      trigger: ['input', 'blur'],
    },
  ],
  zjqk: [
    {
      required: true,
      message: '请输入资金缺口',
      trigger: ['input', 'blur'],
    },
  ],
  name: [
    {
      required: true,
      message: '请输入法人姓名',
      trigger: ['input', 'blur'],
    },
  ],
  phone: [
    {
      required: true,
      message: '请输入法人手机',
      trigger: ['input', 'blur'],
    },
  ],
}

//上传头像
const message = useMessage();
function on_save(){
  modalForm.value.add_uid = data.add_uid
  handleSave()
}

</script>

<template>
  <!-- 业务页面 -->
  <CommonPage show-footer style="background: #1b3a7d;">
    <template #header>
        <n-page-header subtitle="/    企业贷款专家" style="color:#ffffff">
    <template #title>
      <a href="https://anyway.fm/" style="text-decoration: none; color: #ffffff">企业信息表{{data.add_uid}}</a>
    </template>
    <template #avatar>
      <n-avatar
        src="https://cdnimg103.lizhi.fm/user/2017/02/04/2583325032200238082_160x160.jpg"
      />
    </template>
  </n-page-header>
    </template>

      <NForm ref="modalFormRef"   :label-width="100" :model="modalForm"
             :rules="addAPIRules" :validate-on-rule-change="true" size="large">

            <n-divider dashed>
              企业信息填写
            </n-divider>
            <NFormItem label="企业名称" path="qymc">
              <NInput v-model:value="modalForm.qymc" clearable placeholder="企业名称" />
            </NFormItem>
            <NFormItem label="企业税号" path="qysh">
              <NInput v-model:value="modalForm.qysh" clearable placeholder="企业税号" />
            </NFormItem>
            <NFormItem label="资金缺口" path="zjqk">
              <NInput v-model:value="modalForm.zjqk" clearable placeholder="资金缺口" />
            </NFormItem>
            <NFormItem label="2024开票" path="kp24">
              <NInput v-model:value="modalForm.kp24" clearable placeholder="2024年开票" />
            </NFormItem>
            <NFormItem label="2023开票" path="kp23">
              <NInput v-model:value="modalForm.kp23" clearable placeholder="2023年开票" />
            </NFormItem>
             <NFormItem label="企业地址" path="address">
              <NInput v-model:value="modalForm.address" clearable placeholder="企业地址" />
            </NFormItem>

        <n-divider dashed>
              法人信息填写
            </n-divider>

            <NFormItem label="法人姓名" path="name">
              <NInput v-model:value="modalForm.name" clearable placeholder="法人姓名" />
            </NFormItem>
            <NFormItem label="身份证号码" path="sfz">
              <NInput v-model:value="modalForm.sfz" clearable placeholder="身份证号码" />
            </NFormItem>
            <NFormItem label="手机号码" path="phone">
              <NInput v-model:value="modalForm.phone" clearable placeholder="手机号码" />
            </NFormItem>
            <NFormItem label="银行卡号" path="yh_no">
              <NInput v-model:value="modalForm.yh_no" clearable placeholder="银行卡号" />
            </NFormItem>
            <NFormItem label="银行开户行" path="yh_khh">
              <NInput v-model:value="modalForm.yh_khh" clearable placeholder="开户行" />
            </NFormItem>
            <NFormItem label="预留手机号" path="yh_phone">
              <NInput v-model:value="modalForm.yh_phone" clearable placeholder="预留手机号" />
            </NFormItem>
            <NFormItem label="婚姻状况" path="hyzk">
              <NInput v-model:value="modalForm.hyzk" clearable placeholder="婚姻状况" />
            </NFormItem>
        <n-divider dashed>
              其他联系人信息填写
            </n-divider>

            <NFormItem label="配偶姓名" path="po_name">
              <NInput v-model:value="modalForm.po_name" clearable placeholder="配偶姓名" />
            </NFormItem>
            <NFormItem label="配偶手机号" path="po_phone">
              <NInput v-model:value="modalForm.po_phone" clearable placeholder="配偶手机号" />
            </NFormItem>
            <NFormItem label="配偶身份证" path="po_sfz">
              <NInput v-model:value="modalForm.po_sfz" clearable placeholder="配偶身份证号" />
            </NFormItem>
            <NFormItem label="紧急联系人1" path="contact1">
              <NInput v-model:value="modalForm.contact1" clearable placeholder="紧急联系人1" />
            </NFormItem>
            <NFormItem label="紧急联系人2" path="contact2">
              <NInput v-model:value="modalForm.contact2" clearable placeholder="紧急联系人2" />
            </NFormItem>

         <n-divider dashed>
              证件照片填写
            </n-divider>


              <NFormItem label="身份证正面" path="sfz_z" style="width: 100%">
              <n-upload :action="data.uploadAction" :headers="{ token: data.token }" :max="1"
                @finish="customRequestMethod1" list-type="image-card" v-model:file-list="data.fileList1.value"
                :show-file-list="true">
              </n-upload>
            </NFormItem>
              <NFormItem label="身份证反面" path="sfz_f" style="width: 100%">
              <n-upload :action="data.uploadAction" :headers="{ token: data.token }" :max="1"
                @finish="customRequestMethod2" list-type="image-card" v-model:file-list="data.fileList2.value"
                :show-file-list="true">
              </n-upload>
            </NFormItem>
              <NFormItem label="营业执照" path="yyzz" style="width: 100%">
              <n-upload :action="data.uploadAction" :headers="{ token: data.token }" :max="1"
                @finish="customRequestMethod3" list-type="image-card" v-model:file-list="data.fileList3.value"
                :show-file-list="true">
              </n-upload>
            </NFormItem>

        <div style="padding: 0 50px">
        <NButton size="large" style="margin: auto;width: 100%" type="primary" @click="on_save">
          <TheIcon icon="material-symbols:add" :size="18"   />提交资料
        </NButton>
        </div>

      </NForm>

  </CommonPage>
</template>
